<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>孙悟空</title>
    <style>
        *{
            margin:auto;
            padding: 0;
        }
        body{
            background-color: black;
            position: relative;
        }
        .content>img{
            position: absolute;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="content">
        <img src="player_right.gif" alt="右边移动">
    </div>
</body>
<script>
    //189000950 顾啟思
    $(function() {
        alert("提示：按下R变身 按下T恢复");
        $(document).keydown(function(event) 
        { 
            switch (event.keyCode) { 
                //R
                case 82: 
                $(".content>img").attr("src","player2.gif")
                $(document).click(function(e){
                var page_x = parseInt(e.pageX + 12) + "px";
                    //定义一个Y轴的位置
                var page_y = e.pageY + "px";
                    //图片的左边X轴，上部Y轴
                var pos = $(".content>img").position();
                pos.left; // left offset position
                //查看图片的距离做左边的位置
                console.log(pos.left);
                //查看鼠标的距离做左边的位置
                console.log(parseInt(page_x));
                if(pos.left<parseInt(page_x)){
                    $(".content>img").attr("src","playerbig_right.gif")
                    $(".content>img").stop().animate(
                        {
                            "left": page_x,
                            "top": page_y
                        },5000,
                        "linear",
                    )
                    }
                else{
                    $(".content>img").attr("src","playerbig_left.gif")
                    $(".content>img").stop().animate(
                        {
                            "left": page_x,
                            "top": page_y
                        },5000,
                        "linear",
                        )
                    } 
                });
                    break; 
                    //Q
                    case 81: $(".content>img").attr("src","player3.gif"); break;
                    //W 
                    case 87: $(".content>img").attr("src","player1_big.gif"); break; 
                    //E
                    case 69: $(".content>img").attr("src","player1.gif"); break;
                    //T
                    case 84: $(".content>img").attr("src","player_right.gif")
                    $(document).click(function(e){
                    var page_x = parseInt(e.pageX + 12) + "px";
                        //定义一个Y轴的位置
                    var page_y = e.pageY + "px";
                        //图片的左边X轴，上部Y轴
                    var pos = $(".content>img").position();
                    pos.left; // left offset position
                    //查看图片的距离做左边的位置
                    console.log(pos.left);
                    //查看鼠标的距离做左边的位置
                    console.log(parseInt(page_x));
                    if(pos.left<parseInt(page_x)){
                        $(".content>img").attr("src","player_right.gif")
                        $(".content>img").stop().animate(
                            {
                                "left": page_x,
                                "top": page_y
                            },5000,
                            "linear",
                        )
                        }
                    else{
                        $(".content>img").attr("src","player_left.gif")
                        $(".content>img").stop().animate(
                            {
                                "left": page_x,
                                "top": page_y
                            },5000,
                            "linear",
                            )
                        } 
                    });  
                    break; 
                        }; 
                            return false;
                    });
        
        //移动
        $(document).click(function(e){
            var page_x = parseInt(e.pageX + 12) + "px";
                //定义一个Y轴的位置
            var page_y = e.pageY + "px";
                //图片的左边X轴，上部Y轴
            var pos = $(".content>img").position();
            pos.left; // left offset position
            //查看图片的距离做左边的位置
            console.log(pos.left);
            //查看鼠标的距离做左边的位置
            console.log(parseInt(page_x));
            if(pos.left<parseInt(page_x)){
                $(".content>img").attr("src","player_right.gif")
                $(".content>img").stop().animate(
                    {
                        "left": page_x,
                        "top": page_y
                    },5000,
                    "linear",
                   )
                }
            else{
                $(".content>img").attr("src","player_left.gif")
                $(".content>img").stop().animate(
                    {
                        "left": page_x,
                        "top": page_y
                    },5000,
                    "linear",
                    )
                } 
            });  
        })
    
</script>
</html>